/**
 * 普通的react组件
 * @param props
 * @returns {*}
 * @constructor
 */
function AddComponent(props) {
    return (
        <div className="container">
            <div className="title">普通加减乘除</div>
            <div className="num">{props.number}</div>
            <div className="operation" style={{display:'flex'}}>
                <div class="btn btn-add" onClick={props.increment}>加</div>
                <div class="btn btn-delete" onClick={props.decrement}>减</div>
                <div class="btn btn-edit" onClick={props.less}>乘</div>
                <div class="btn btn-update" onClick={props.except}>除</div>
            </div>
        </div>
    )
}

/**
 * 绑定redux的react组件
 * @param props
 * @returns {*}
 * @constructor
 */
function ReduxComponent(props) {
    return (
        <div className="container">
            <div className="title">Redux加减乘除</div>
            <div className="num">{props.number}</div>
            <div className="operation" style={{display:'flex'}}>
                <div class="btn btn-add" onClick={props.incrementRedux}>加</div>
                <div class="btn btn-delete" onClick={props.decrementRedux}>减</div>
                <div class="btn btn-edit" onClick={props.lessRedux}>乘</div>
                <div class="btn btn-update" onClick={props.exceptRedux}>除</div>
            </div>
        </div>
    )
}

/**
 * App组件
 */
class App extends React.Component{
    constructor(props) {
        super(props);
        /**
         *创建redux
         */
        this.counter = Redux.createStore(counter,100)
        this.state = {
            number:0,
            count:this.counter.getState()
        }
    }

    componentDidMounted(){
        console.log("组件已经被渲染到 DOM 中后运行")
    }

    componentWillUnmount(){
        console.log("准备卸载··········")
    }

    /**
     * 加
     */
    increment(){
        let number = this.state.number
        number++
        this.setState({
            number:number
        })
    }

    /**
     * redux加操作
     */
    incrementRedux(){
        //提交redux十事件
        this.counter.dispatch({ state:this.state.count,type: 'INCREMENT' })
        let count = this.counter.getState()
        this.setState({
            count:count
        })
    }

    /**
     * 减
     */
    decrement(){
        let number = this.state.number
        number--
        this.setState({
            number:number
        })
    }

    /**
     * redux减操作
     */
    decrementRedux() {
        this.counter.dispatch({ type: 'DECREMENT' })
        let count = this.counter.getState()
        this.setState({
            count:count
        })
    }
    /**
     * 乘
     */
    less(){
        let number = this.state.number
        number *= 5
        this.setState({
            number:number
        })
    }

    /**
     * redux乘操作
     */
    lessRedux(){
        this.counter.dispatch({ type: 'LESS' })
        let count = this.counter.getState()
        this.setState({
            count:count
        })
    }
    /**
     * 除
     */
    except(){
        let number = this.state.number
        number /= 5
        this.setState({
            number:number
        })
    }

    /**
     * redux除操作
     */
    exceptRedux(){
        this.counter.dispatch({ type: 'EXCEPT' })
        let count = this.counter.getState()
        this.setState({
            count:count
        })
    }

    render(){
        return(
            <div class="app">
                <AddComponent number={this.state.number}
                              increment={this.increment.bind(this)}
                              decrement={this.decrement.bind(this)}
                              less={this.less.bind(this)}
                              except={this.except.bind(this)}/>
                <ReduxComponent number={this.state.count}
                                incrementRedux={this.incrementRedux.bind(this)}
                                decrementRedux={this.decrementRedux.bind(this)}
                                lessRedux={this.lessRedux.bind(this)}
                                exceptRedux={this.exceptRedux.bind(this)}/>
            </div>
        )
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById("root")
);
